<template>
  <div>
    <!-- <el-form-item v-if="array.length" :label="config.label" :rules="config.rules" :class="config.formItemClass" :prop="config.name" :style="config.formItemStyle"> -->
    <!-- 复选框组 -->
    <el-checkbox-group v-if="config.isCheckboxGroups" v-model="form.data.checkbox" :size="config.size" :style="config.childStyle || {}" :class="config.childClass">
      <el-checkbox v-for="(item,index) in array" :key="item.value" :checked="index === 0" :label="item.value" name="checkbox">
        <span v-if="item.isHtml" v-html="item.label" ></span>
        <template v-else>{{ item.label }}</template>
      </el-checkbox>
    </el-checkbox-group>

    <!-- 单个复选框 -->
    <template v-else>
      <el-checkbox v-for="(item,index) in array" :key="item.value" v-model="form.data.value" :size="config.size" :style="config.childStyle || {}" :class="config.childClass">
        <span v-if="item.isHtml" v-html="item.label" ></span>
        <template v-else>{{ item.label }}</template>
      </el-checkbox>
    </template>

  </div>
  <!-- </el-form-item> -->
</template>

<script>
export default {
  name: 'FormCheckbox',
  props: {
    config: {
      type: Object,
      required: false,
      default: () => {
        return {
          label: '复选框',
          isCheckboxGroups: true, // true是复选框组
          name: 'checkbox',
          rules: [
            { required: true, message: '请选择复选框', trigger: 'blur' }
          ],
          array: []
        }
      }
    },
    // 组件循环时需要的idx值
    idx: {
      type: [Number, String],
      default: 0
    },
    data: {
      type: [String, Boolean],
      default() {
        return ''
      },
      required: false
    }
  },
  data () {
    return {
      isCheckboxGroups: true, // true 默认是复选框组
      form: {
        data: {
          checkbox: [],
          value: ''
        }
      },
      array: []
    }
  },
  watch: {
    data: {
      handler (val) {
        if (this.isCheckboxGroups) { // 复选框组
          if (this.$validate.isNull(val)) {
            this.form.data.checkbox = this.array.length > 0 ? [this.array[0].key + ''] : ''
          } else {
            this.form.data.checkbox = val.length > 0 ? val.split(',') : []
          }
        } else { // 单个复选框
          this.form.data.value = !val ? '' : val
        }
      },
      deep: true,
      immediate: true
    },
    config: {
      handler (obj) {
        if (obj.hasOwnProperty('isCheckboxGroups')) {
          this.isCheckboxGroups = obj.isCheckboxGroups
        }
        if (obj.isCheckboxGroups) { // 复选框组
          if (obj.array.length > 0) {
            this.array = obj.array
          }
        } else { // 单个复选框，支取第一个
          this.array = obj.array.slice(0, 1)
        }
      },
      deep: true,
      immediate: true
    },
    form: {
      handler (val) {
        // this.$emit('updateForm', '' + this.config.name, this.form.data.checkbox.toString())
        if (this.isCheckboxGroups) { // 复选框组
          this.$emit('updateForm', '' + this.config.name, this.form.data.checkbox.toString(), this.idx, this.config)
        } else { // 单个复选框
          this.$emit('updateForm', '' + this.config.name, this.form.data.value, this.idx, this.config)
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
</style>
